<template>
  <div class="volume-panel" @click.stop>
    <div class="volume-title">体积测量</div>
    <el-form label-position="left" label-width="80px" size="small">
      <el-form-item label="基准面高度">
        <el-input v-model="volumeConfig.planeHeight" placeholder="请输入基准面高度">
          <template #append>m</template>
        </el-input>
      </el-form-item>
      <el-form-item label="网格宽度">
        <el-input v-model="volumeConfig.gridWidth" placeholder="请输入网格宽度">
          <template #append>m</template>
        </el-input>
      </el-form-item>
      <el-form-item label="挖方体积"> {{ volumeConfig.cutVolume }}（立方米） </el-form-item>
      <el-form-item label="填方体积"> {{ volumeConfig.fillVolume }}（立方米） </el-form-item>
      <el-form-item label="填挖方体积">
        {{ volumeConfig.cutAndFillVolume }}（立方米）
      </el-form-item>
      <el-form-item label="分析进度"> {{ volumeConfig.progress }} % </el-form-item>
    </el-form>
    <div class="button-create">
      <el-button type="primary" @click="createESVolumeMeasurement">
        {{ startVolumeMeasurement ? '重新描绘基准面' : '描绘基准面' }}</el-button
      >
      <el-button type="primary" :disabled="!startVolumeMeasurement" @click="startAnalysis"
        >开始测量</el-button
      >
    </div>
  </div>
</template>

<script setup>
import { ref, onUnmounted } from 'vue'
import { getobjm } from '@/utils/getobjm.js'
import { ESVolumeMeasurement } from 'earthsdk3'
import { useStartAnalysisStore } from '@/stores/startAnalysis.js'
const startAnalysisStore = useStartAnalysisStore()
const objm = getobjm()
// 人员配置属性
const volumeConfig = ref({
  planeHeight: 0, //基准面高度
  gridWidth: 1, //网格宽度（米）
  cutVolume: 0, //挖方体积
  fillVolume: 0, //填方体积（立方米）
  cutAndFillVolume: 0, //填挖方体积（立方米）
  progress: 0, //分析进度
  depthTest: true, //深度检测
})

// 定义emit，用于通知父组件关闭配置面板
const emit = defineEmits(['close-panel'])
const sceneObjectESVolumeMeasurement = ref(null)
const startVolumeMeasurement = ref(false)
const createESVolumeMeasurement = () => {
  if (sceneObjectESVolumeMeasurement.value) {
    objm.destroySceneObject(sceneObjectESVolumeMeasurement.value)
  }
  sceneObjectESVolumeMeasurement.value = objm.createSceneObject(ESVolumeMeasurement)
  if (!sceneObjectESVolumeMeasurement.value) return
  sceneObjectESVolumeMeasurement.value.planeHeight = volumeConfig.value.planeHeight
  sceneObjectESVolumeMeasurement.value.planeWidth = volumeConfig.value.planeWidth
  sceneObjectESVolumeMeasurement.value.editing = true
  startAnalysisStore.startAnalysisState = true
  sceneObjectESVolumeMeasurement.value.editingChanged.disposableWeakOn(() => {
    if (
      sceneObjectESVolumeMeasurement.value &&
      sceneObjectESVolumeMeasurement.value.editing === false
    ) {
      const pos = sceneObjectESVolumeMeasurement.value.points?.length
      setTimeout(() => {
        if (pos && pos >= 3) {
          startVolumeMeasurement.value = true
        }
      }, 300)
    }
  })
}

const startAnalysis = async () => {
  await sceneObjectESVolumeMeasurement.value.start()
  sceneObjectESVolumeMeasurement.value.cutVolumeChanged.don((val) => {
    volumeConfig.value.cutVolume = val.toFixed(2)
  })
  sceneObjectESVolumeMeasurement.value.fillVolumeChanged.don((val) => {
    volumeConfig.value.fillVolume = val.toFixed(2)
  })
  sceneObjectESVolumeMeasurement.value.cutAndFillVolumeChanged.don((val) => {
    volumeConfig.value.cutAndFillVolume = val.toFixed(2)
  })
  sceneObjectESVolumeMeasurement.value.progressChanged.don((val) => {
    volumeConfig.value.progress = val.toFixed(2)
  })
}

onUnmounted(() => {
  // 清空
  if (sceneObjectESVolumeMeasurement.value) {
    objm.destroySceneObject(sceneObjectESVolumeMeasurement.value)
  }
  startAnalysisStore.startAnalysisState = false
})
</script>

<style lang="scss" scoped>
.volume-panel {
  width: 280px;
  color: #ffffff;
  background-color: rgba(0, 8, 26, 0.8);
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 195, 255, 0.5);
  border: 1px solid rgba(0, 195, 255, 0.6);
  padding: 8px;

  .volume-title {
    font-size: 14px;
    color: #00c3ff;
    font-weight: bold;
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(0, 195, 255, 0.3);
  }

  .full-width {
    width: 100%;
  }

  .button-create {
    :deep(.el-button) {
      width: 100%;
      background-color: rgba(0, 195, 255, 0.2);
      border: 0.0521vw solid rgba(0, 195, 255, 0.6);
      color: #00c3ff;
      border-radius: 0.2083vw;
      font-size: 0.625vw;
      height: 1.6667vw;
      line-height: 1.6667vw;
      margin: 0;
      margin-top: 10px;
      &:hover {
        background-color: rgba(0, 195, 255, 0.4);
      }
    }
  }
}

:deep(.el-form-item) {
  margin-bottom: 12px;

  .el-form-item__label {
    color: #ffffff;
    font-size: 12px;
  }
}

:deep(.el-input__wrapper),
:deep(.el-input-number__wrapper),
:deep(.el-select .el-input__wrapper) {
  background-color: rgba(30, 30, 40, 0.8);
  border: 1px solid rgba(60, 60, 70, 0.8);
  box-shadow: none;
}

:deep(.el-input__inner) {
  color: #ffffff;
  height: 28px;
}

:deep(.el-input-group__append) {
  background-color: rgba(0, 195, 255, 0.2);
  color: #ffffff;
  border: 1px solid rgba(60, 60, 70, 0.8);
  padding: 0 10px;
}

:deep(.el-select-dropdown) {
  background-color: rgba(30, 30, 40, 0.9);
  border: 1px solid rgba(60, 60, 70, 0.8);

  .el-select-dropdown__item {
    color: #ffffff;

    &.selected {
      color: #409eff;
      background-color: rgba(64, 158, 255, 0.2);
    }

    &:hover {
      background-color: rgba(64, 158, 255, 0.1);
    }
  }
}

:deep(.el-slider) {
  --el-slider-main-bg-color: #409eff;
  --el-slider-runway-bg-color: rgba(64, 158, 255, 0.2);
  --el-slider-stop-bg-color: #ffffff;
  --el-slider-height: 6px;

  .el-slider__button {
    border: 2px solid #409eff;
    background-color: #ffffff;
  }

  .el-slider__runway {
    height: 6px;
  }

  .el-slider__bar {
    height: 6px;
  }
}

:deep(.el-input-number__decrease),
:deep(.el-input-number__increase) {
  background-color: rgba(30, 30, 40, 0.8);
  color: #ffffff;
  border-color: rgba(60, 60, 70, 0.8);
}

:deep(.el-tooltip__trigger) {
  color: #ffffff;
}
</style>
